<!-- CourseCenter_CourseCategory.html -->
<!DOCTYPE html>
<html id="category_html">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>课程分类列表</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" href="../../css/weui.min.css">
		<link rel="stylesheet" href="../../css/mui.min.css"/>
		<link rel="stylesheet" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css">
			html,body{
				background-color: rgba(0,0,0,0);
			}
			.mui-table-view-cell{
				padding: 10px 10px;
			}
			.selected-cell{
				color: #18b4ed;
			}
			.mui-table-view-cell{
				line-height: 24px;
			}
		</style>
	</head>
	<body>
    	<ul id="category_list" class="mui-table-view">
    		<li id="0" class="mui-table-view-cell base_content_font base_dark_grey">
    			全部
	    	</li>
    	</ul>
	</body>
	<!-- <script type="text/javascript" src="../../script/mui.min.js"></script> -->
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript">
		var currentCategoryId = '';
		apiready = function(){
			setupBgClick();
		    loadCategoryData();
		    setupNotifi();
		}
		function setupNotifi(){
			api.addEventListener({
			    name: 'searchCourseNotifi'
			}, function(ret, err) {
			    $('.mui-table-view-cell').removeClass('selected-cell');
			    $('#0').addClass('selected-cell');
			});
			api.addEventListener({
			    name: 'setupCategorySelectedStatusNotifi'
			}, function(ret, err) {
			    $('.mui-table-view-cell').removeClass('selected-cell');
			    $('#'+ret.value.categoryid).addClass('selected-cell');
			});
		}
		function loadCategoryData(){
			var param = {
				jid : 0,
				fid : 0
			};
			cfnetppPOST(url_courseCategory, param, true, function(data, status){
				if (status == 'success') {
					if (data.code == 200) {
						var categoryArr = data.data.categoryList;
						if (categoryArr != null && categoryArr.constructor == Array && categoryArr.length > 0) {
							var categoryHtmlString = '<li id="0" class="mui-table-view-cell base_content_font base_dark_grey">全部</li>';
							for (var i = 0; i < categoryArr.length; i++) {
								var categoryData = categoryArr[i];
								categoryHtmlString += categoryCellHtml(categoryData, i);
							}
							$('#category_list').html(categoryHtmlString);
							setupCellClick();
						}
					}
				}
			});
		}
		function categoryCellHtml(data, index){
			if (data.categoryName == '') {
				return '';
			}
			var selectedClass = '';
			if ((api.pageParam.categoryid == null && index == 0) || api.pageParam.categoryid == data.categoryid) {
				selectedClass = ' selected-cell';
			}
			return '<li id="'+data.categoryid+'" class="mui-table-view-cell base_content_font base_dark_grey'+selectedClass+'">'+
	    			data.categoryName+
		    	'</li>';
		}
		function setupBgClick(){
			$('#category_html').click(function(){
				api.setFrameAttr({
				    name: 'CourseCenter_CourseCategory',
				    hidden: true
				});
			});
		}
		function setupCellClick(){
			$('.mui-table-view-cell').unbind('click');
			$('.mui-table-view-cell').click(function(event){
				event.stopPropagation();
				var currentCategoryId = $(this).attr('id');
				var currentCategoryTitle = $(this).text();
				$('.mui-table-view-cell').removeClass('selected-cell');
				$('#'+currentCategoryId).addClass('selected-cell');
				api.sendEvent({
				    name: 'courseCategoryNotifi',
				    extra: {
				        currentCategoryId: currentCategoryId, 
				        currentCategoryTitle: currentCategoryTitle
				    }
				});
				api.setFrameAttr({
				    name: 'CourseCenter_CourseCategory',
				    hidden: true
				});
			});
		}
	</script>
</html>